<template>
	<div>
		<div class="aid">
			<div class="base">
				<p class="fixed-top">
					完结申请
					<a-icon @click="closeFunction" type="close" />
				</p>
				<div class="main">
					<a-form :form="form" :label-col="{ span: 5 }" :wrapper-col="{ span: 18 }" @submit="handleSubmit">
						<a-form-item label="完结附件">
							<a-upload
								:action="action"
								list-type="picture"
								:file-list="icofileList"
								@preview="handlePreview"
								:before-upload="beforeUpload"
								@change="e => icohandleChange(e, 'Ico')"
							>
								<a-button>
									<a-icon type="upload" />
									完结附件上传
								</a-button>
							</a-upload>
							<a-list
								class="fileListArea"
								size="small"
								bordered
								:dataSource="oldList"
								v-if="oldList.length"
							>
								<a-list-item slot="renderItem" slot-scope="item, index" style="display: flex;">
									<div style="flex: 1;">
										<div style="width: 300px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">{{ item.FileName }}</div>
									</div>
									<a-icon type="delete" @click="deleteFile(item,1)" style="height: 12px;vertical-align: top;margin-top: 4px;margin-right:12px;cursor: pointer;" ></a-icon>
									<a-icon type="download" @click="downloadFile(item,1)" style="height: 12px;vertical-align: top;margin-top: 4px;margin-right:12px;cursor: pointer;" ></a-icon>
								</a-list-item>
							</a-list>
						</a-form-item>
						<a-form-item class="fixed-bottom" :wrapper-col="{ span: 12, offset: 5 }"><a-button type="primary" html-type="submit">提交</a-button></a-form-item>
					</a-form>
				</div>
			</div>
		</div>
		<a-modal :visible="previewVisible" :footer="null" @cancel="handleCancel"><img alt="example" style="width: 100%" :src="previewImage" /></a-modal>
	</div>
</template>

<script>
import moment from 'moment';
import Func from '@/utils/func';
import Cache from '@/utils/cache';
import { UserActivityDetail, UserUpdateActivity, UserDoGetActivityTypeList,UserActivityFile,AddUserActivityFile,DeleteUserActivityFile,DownUserActivityFile,UserDoSubmitEndActivity } from '@/api/follow';
const data = [];
export default {
	props: {
		text: Object
	},
	watch: {
			text: {
				handler(text) {
					this.getList()
				},
				immediate: true
			},
		},
	components: {},
	data() {
		return {
			icofileList: [],
			previewVisible: false,
			previewImage: '',
			data,
			formLayout: 'horizontal',
			form: this.$form.createForm(this, {
				name: 'coordinated'
			}),
			rules: {},
			action:'',
			oldList:[],
			requestUrl:this.global.requestUrl,
			token: Cache.get('token'),
		};
	},
	computed: {},
	methods: {
		moment,
		async getList() {
			let res = await UserActivityFile({activityID:this.text.ID,type:2})
			this.oldList = res.data.data
		},
		closeFunction(data) {
			this.$emit('closeFun', data);
		},
		closeFun() {
			this.applyIf = false;
		},
		handleCancel() {
			this.previewVisible = false;
			this.previewImage = '';
		},
		async handlePreview(file) {
			if (file.url) {
				this.previewImage = file.url;
			} else {
				this.previewImage = this.requestUrl + file.response.url;
			}
			window.open(this.previewImage, '_blank')
		},
		beforeUpload(file, fileList){
			if(file.type.indexOf('image')>-1){
				this.action = this.requestUrl+'/Common/DoUploadFile?type=image'
			}else{
				this.action = this.requestUrl+'/Common/DoUploadFile?type=file'
			}
		},
		async icohandleChange(e, name) {
			this.icofileList = e.fileList;
			if(e.file.status=='done'){
				let data={}
				data.ActivityID = this.text.ID
				data.Type = 2
				data.FileName = e.file.response.fileName
				data.FilePath = e.file.response.url
				let res = await AddUserActivityFile(data)
				if(res.data.code==0){
					this.getList()
				}
				this.icofileList = []
			}
		},
		async deleteFile(item){
			let that = this
			this.$confirm({
				title: '提示',
				content: `您确定删除该附件吗？`,
				okText: '确认',
				cancelText: '取消',
				async onOk() {
					let res = await DeleteUserActivityFile({id:item.ID})
					if (res.data.code == 0) {
						that.oldList.splice(that.oldList.findIndex(m => m.ID === item.ID), 1)
						that.$message.success(res.data.msg);
					} else {
						that.$message.error(res.data.msg);
					}
				}
			});
		},
		async downloadFile(item) {
			let hrefUrl = this.requestUrl + 'User/ActivityFile/DownFile?userToken=' + encodeURIComponent(this.token)+'&id='+item.ID;
			window.open(hrefUrl, '_blank');
		},
		async handleSubmit() {
			// if(this.oldList.length==0){
			// 	this.$message.error('请先上传完结附件，之后再提交完结审核');
			// 	return false
			// }
			let res = await UserDoSubmitEndActivity({ID:this.text.ID});
			if (res.data.code == 0) {
				this.$message.success(res.data.msg);
				this.$emit('closeFun', 1);
			}
		}
	}
};
</script>

<style lang="less" scoped>
.aid {
	position: fixed;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.5);
	top: 0px;
	left: 0px;
	z-index: 999;
}

.base {
	position: absolute;
	width: 600px;
	height: 540px;
	background: #fff;
	left: 50%;
	margin-left: -300px;
	top: 50%;
	margin-top: -270px;
	overflow-y: auto;
	.main {
		height: 90%;
		overflow-y: scroll;
	}
	/deep/.ant-form-item {
		margin: 20px 50px;
		/deep/.ant-form-item-label {
			width: 100px;
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
			text-align: right;
		}
		/deep/.ant-form-item-control-wrapper {
			flex: 1;
			/deep/.ant-calendar-picker,
			/deep/.ant-time-picker {
				width: 100%;
			}
		}
	}
}
/deep/.ant-form {
	margin-top: 50px;
	padding-bottom: 50px;
}
.titletip {
	padding-left: 10px;
	font-size: 12px;
	color: red;
}
</style>
